Setting inheriting styles on a container

An inherited style is a style that inherits its value from parent components in the document's MovieClip hierarchy. If a text or color style is not set at an instance, custom, or class level, Flash searches the MovieClip hierarchy for the style value. Thus, if you set styles on a container component, the contained components inherit these style settings.

The following styles are inheriting styles:

The Style Manager tells Flash whether a style inherits its value. Additional styles can also be added at runtime as inheriting styles. For more information, see StyleManager class in the ActionScript 2.0 Components Language Reference.

NOTE

One major difference between the implementation of styles for Flash components, and cascading style sheets for HTML pages, is that the CSS inherit value is not supported for Flash components. Styles are either inherited or not by component design.

Inherited styles take priority over global styles. For a list of style precedence, see Using global, custom, and class styles in the same document.

The following example demonstrates how inheriting styles can be used with an Accordion component, which is available with Flash.

To create an Accordion component with styles that are inherited by the components in the individual Accordion panes:

  1. Open a new FLA file.
  2. Drag an Accordion component from the Components panel to the Stage.
  3. Use the Property inspector to name and size the Accordion component. For this example, give the component the instance name accordion.
  4. Drag a TextInput component and a Button component from the Components panel to the library.

    By dragging the components to the library, you make them available to your script at runtime.

  5. Add the following ActionScript to the first frame of the Timeline:
    var section1 = accordion.createChild(mx.core.View, "section1", {label: "First Section"});
    var section2 = accordion.createChild(mx.core.View, "section2", {label: "Second Section"});
    
    var input1 = section1.createChild(mx.controls.TextInput, "input1");
    var button1 = section1.createChild(mx.controls.Button, "button1");
    
    input1.text = "Text Input";
    button1.label = "Button";
    button1.move(0, input1.height + 10);
    
    var input2 = section2.createChild(mx.controls.TextInput, "input2");
    var button2 = section2.createChild(mx.controls.Button, "button2");
    
    input2.text = "Text Input";
    button2.label = "Button";
    button2.move(0, input2.height + 10);
    

    The above code adds two children to the Accordion component and loads each with a TextInput and Button control, which this example uses to demonstrate style inheritance.

  6. Select Control > Test Movie to see the document before adding style inheritance.
  7. Add the following ActionScript to the end of the script in the first frame:
    accordion.setStyle("fontStyle", "italic");
    
  8. Select Control > Test Movie to see the changes.

Notice that the fontStyle setting on the Accordion component affects not only the Accordion text itself but also the text associated with the TextInput and Button components inside the Accordion component.